<div class="panel">
	<div class="row">
		<div>第<span data-bind="text:counter"></span>次触发路由，当前激活的路由: <span data-bind="text:currentRoutePath"></span></div>
		<ul class="nav nav-pills">
			<li><a href="#reactive-route/apple">#reactive-route/apple</a></li>
			<li><a href="#reactive-route/banana">#reactive-route/banana</a></li>
			<li><a href="#reactive-route/orange">#reactive-route/orange</a></li>
		</ul>
		<p style="border-top: 1px solid black;border-bottom: 1px solid black;margin: 4px;" data-bind="text:message"></p>
	</div>
	<div class="row">
		<ul class="nav nav-pills nav-stacked col-xs-3" data-bind="foreach:router.navigationModel">
			<li role="presentation " data-bind="css: { active: isActive } ">
				<a data-bind="attr: { 'data-href': hash }, text: title,click:$root.activeRoute"></a>
			</li>
		</ul>
		<div class="col-xs-9" data-bind="router: {cacheViews:true }"></div>
	</div>
</div>